<template>
    <div class="wrapper">
      <div class="page_content">
        <div class="top_logo">
          <div class="left_logo">
            <div class="img_logo">
              <img :src="Logo" alt />
            </div>
          </div>
          <div class="right_search">
            <div>
              <div class="service_con" @click="goOnline()">
                <img :src="Service" alt />
              </div>
              <van-popover v-model="showPopover" trigger="click" placement="bottom-end" :actions="actions"
                @select="onSelect">
                <template #reference>
                  <div class="iconfont icon-icon_A">

                  </div>
                </template>
              </van-popover>
            </div>
          </div>

        </div>
        <div class="center_tabs">
          <!-- 最多关注 -->
          <!-- TODO -->
          <div class="cu-bxo1" v-if="!loading">
            <div class="cu-title">
                {{ $t('hj5') }}
            </div>
            <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
                <van-swipe-item >
                    <div class="cu-pink-box">
                        <div  class="cu-item1" :class="item.hcrate>0?'cu-up':''" v-for="(item,index) in newlist[0]" :key="index" @click="handleGoToKlineDetail(item,1)">
                            <div class="t1 van-ellipsis">{{ item.name }}</div>
                            <div class="t2">{{ item.nowPrice }}</div>
                            <div class="flex-c">
                                <div class="t3">{{ item.preclose_px }}</div>
                                <div class="t3 ml10">{{ item.hcrate }}%</div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item >
                    <div class="cu-pink-box">
                        <div class="cu-item1" :class="item.hcrate>0?'cu-up':''"  v-for="(item,index)  in newlist[1]" :key="index" @click="handleGoToKlineDetail(item,2)">
                            <div class="t1 van-ellipsis">{{ item.name }}</div>
                            <div class="t2">{{ item.nowPrice }}</div>
                            <div class="flex-c">
                                <div class="t3">{{ item.preclose_px }}</div>
                                <div class="t3 ml10">{{ item.hcrate }}%</div>
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <div class="cu-title">
                {{ $t('hj310') }}
            </div>
            <div class="cu-list1">
                <div class="cu-item2">
                    <div class="cu-card1" v-for="(item,index) in uslist" :key="index" @click="handleGoToKlineDetail(item,1)">
                        <div class="cu-card1-top">
                            <div class="text1 van-ellipsis">{{item.name}}</div>
                            <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate }}%</div>
                        </div>
                        <div class="cu-card1-bottom">
                            <div class="cu-tag1 cu-tag-red">US</div>
                            <div class="text3">{{item.code}}</div>
                        </div>
                    </div>
                </div>
                <div class="cu-item2">
                    <div class="cu-card1" v-for="(item,index) in hklist" :key="index" @click="handleGoToKlineDetail(item,2)">
                        <div class="cu-card1-top">
                            <div class="text1 van-ellipsis">{{ item.name }}</div>
                            <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate }}%</div>
                        </div>
                        <div class="cu-card1-bottom">
                            <div class="cu-tag1 cu-tag-blue">HK</div>
                            <div class="text3">{{ item.code }}</div>
                        </div>
                    </div>
                </div>
                <div class="cu-item2">
                    <div class="cu-card1" v-for="(item,index) in tglist" :key="index" @click="handleGoToKlineDetail(item,3)">
                        <div class="cu-card1-top">
                            <div class="text1 van-ellipsis">{{item.spell}}</div>
                            <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate}}%</div>
                        </div>
                        <div class="cu-card1-bottom">
                            <div class="cu-tag1 cu-tag-green">TG</div>
                            <div class="text3">{{ item.code}}</div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <van-skeleton title :row="6" :loading="loading" class="focus_skeleton" />
          <!-- <div class="focus_on" v-if="!loading">
            <div class="fo_content">
              <div class="top_title">
                {{ $t('hj5') }}
              </div>
              <div class="fo_banner">
                <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
                  <van-swipe-item v-for="(item, index)  in proData" :key="index">
                    <div class="item_cont" :class="idx != 2 ? 'item_conts' : ''"
                      v-for="(item2, idx) in proData[currentIndex]" :key="idx" @click="goDetail(item2)">
                      <div class="top_fo">
                        <div class="title">
                          {{ item2.name }}
                        </div>
                        <div class="numbers">
                          {{ item2.price }}
                        </div>
                        <div class="percentage" :class="item2.range > 0 ? 'gree' : 'redd'">
                          <span style="font-weight: 500;">{{ item2.range > 0 ? `${item2.range}` :
                              `${item2.range}`
                          }}</span>
                        </div>
                      </div>
                      <div class="bottom_fo">
                        <div class="title">
                          <span class="numberid" style="margin-right: 0.12rem;">{{ item2.symbol }}</span>
                        </div>
                        <div class="numbers" :class="item2.floatPoint > 0 ? 'gree' : 'redd'">
                          <img :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
                          <span class="point" style="height: 0.4rem;">{{ item2.pnum
                          }}</span>
                        </div>
                        <div class="percentage">
                          <el-tag key="100X"
                            style="width: 80%;text-align: center;height: 0.45rem!important;line-height: 0.45rem!important;">
                            {{ getNum1(Number(item2.pnum.slice(0, 1))) + 'X' }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
          </div> -->
        </div>
        <van-skeleton title :row="18" :loading="loading" />
      </div>
      <!-- tab -->
      <GoToLogin v-show="isGoTo" />
    </div>
  </template>
  <script>
  import HomeList from "./components/home-list";
  import Echart from "./components/echart.vue";
  import * as api from "@/axios/api";
  import Logo from "@/assets/img/icon_home_logo.png";
  import Searchs from "@/assets/ico/leng.png";
  import Service from "@/assets/home/icon_talk.png";
  import clear from "@/assets/home/close.png";
  import Announcement from "@/assets/img/black_laba.png";
  import Tops from "@/assets/home/1.png";
  import Rumen from "@/assets/home/2.png";
  import Xuexi from "@/assets/home/3.png";
  import Guanyu from "@/assets/home/4.png";
  import Huo from "@/assets/home/huo.png";
  import banner1 from "@/assets/img/b1.png";
  import banner2 from "@/assets/img/b2.png";
  import banner3 from "@/assets/img/b3.png";
  // import indexData from "./data.json";
  import GoToLogin from '@/page/home/components/GoLogin.vue';
  import { MessageBox } from 'mint-ui'
  export default {
    components: {
      HomeList,
      GoToLogin,
      Echart,
    },
    props: {},
    data() {
      return {
        Logo,
        Searchs,
        Service,
        clear,
        Announcement,
        indexData: [],
        Huo,
        is_login: false,
        loading: true,
        close: true,
        proData: [], // 分割好的数据
        currentIndex: 0,
        bannerImgsArr: [{
          img: banner1
        }, {
          img: banner2
        }, {
          img: banner3
        }],
        announcementMess: "20202/10 - 交易时间安排",

        artList: [],
        news: "tab_0",
        onlineService: "",
        isGoTo: false,
        bannerList: [],
        userInfo: [],
        showPopover: false,
        actions: [/* { text: 'ZH-TW', icon: require('@/assets/ico/Chinese.png') , lang: 'zh-CN',translate:'chinese_simplified'}, */
        { text: '繁體中文', icon: require('@/assets/ico/tw.png'), lang: 'tww',translate:'chinese_traditional' },
        { text: 'ภาษาไทย', icon: require('@/assets/ico/ภาษาไทย.png'), lang: 'tg',translate:'thai' },
        { text: 'English', icon: require('@/assets/ico/english.png'), lang: 'en',translate:'english' },
        { text: 'Japanese', icon: require('@/assets/ico/Japanese.png'), lang: 'jp', translate: 'jp' },
        { text: 'India', icon: require('@/assets/ico/in.png'), lang: 'India', translate: 'India' },
        { text: 'Singapore', icon: require('@/assets/ico/sg.png'), lang: 'sg', translate: 'sg' }
        ],

        uslist:[],
        hklist:[],
        tglist:[],
        timer1:null,
        timer2:null,
        timer3:null,
        timer4:null
      };
    },
    beforeDestroy() {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
      clearInterval(this.timer3)
      clearInterval(this.timer4)
    },
    computed:{
        newlist(){

            let uslist = [...this.uslist]
            let hklist = [...this.hklist]
            let list1 = uslist.slice(0,3)
            let list2 = hklist.slice(0,3)
            return [list1,list2]
        },
      navsArr(){
        return [{
          img: Tops,
          title: this.$t('hj1'),
        },
        {
          img: Rumen,
          title: this.$t('hj2'),
        },
        {
          img: Xuexi,
          title: this.$t('hj3'),
        },
        {
          img: Guanyu,
          title: this.$t('hj4'),
        }]
      }
    },
   methods: {
    //动态数字
    randomNum(num) {
      num = Number(num);
      const operation = Math.random() < 0.5 ? -0.01 : 0.01;
      return Number(Number(num + (1 * operation)).toFixed(2));
    },
    //进入详情
    handleGoToKlineDetail(item,index) {

      let tg_id = ''
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = '0';
      var if_us = '';
      switch (index) {
        case 1:
          codes = item.code;
          names = item.name;
          stock_type = item.stock_type == 'us' ? item.stock_type + 'a' : item.stock_type;
          soks = item.type ? item.type : this.filterSH(item.stock_type);
          if_zhishu = '0';
          if_us = 1;
          break;
        case 2:
          codes = item.code;
          names = item.name;
          stock_type = item.stock_type + 'a';
          if_us = '2';
          soks = item.type;
          if_zhishu = '0';
          break;
        case 3:
          codes = item.code;
          names = item.spell;
          stock_type = 'tg';
          soks = 0;
          if_us = 0;
          if_zhishu = 0;
          tg_id = item.id || item.Id
          break;
        default:
          break;
      }
      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu,
          tg_id: tg_id,
        }
      });
    },
    generateRandomNumber() {
      const min = -3;
      const max = 3;
      const precision = 2;
      return parseFloat(Math.random() * (max - min) + min, precision).toFixed(2);
    },

      onSelect(e){
        this.$i18n.locale = e.lang;
        console.log("翻译",e.translate)
        window.localStorage.setItem('language', e.lang);
        translate.changeLanguage(e.translate)
        translate.listener.start();	//开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
        translate.execute(); //执行翻译初始化操作，显示出select语言选择
      },
      async getUserInfo() {
        // 获取用户信息
        let data = await api.getUserInfo();
        if (data.status === 0) {
          // 判断是否登录
          this.$store.state.userInfo = data.data;
          this.userInfo = data.data;
        } else {
        }
      },
      //构造随机数列表  50 100 200
      getNum1(num) {
        if (num == 1) {
          return 50;
        } else if (num == 2) {
          return 100;
        } else if (num >= 3) {
          return 200;
        }
      },
      goDetail(item) {
        if (this.userInfo.length == 0) {
          this.$store.commit('dialogVisible', true);
          return;
        }
        this.$router.push({
          path: "/kline",
          query: {
            name: item.name,
            stockplate: item.stock_plate,
            code: item.symbol.substring(2, item.symbol.length),
            type: item.market,
            sok: this.filterSH(item.market),
            if_zhishu: '0',
          }
        });
      },
      filterSH(val) {
        if (val === "sh") {
          return 1;
        } else if (val === "bj" || val === "sz") {
          return 0;
        }
      },
      goOnline() {
        this.$router.push('/service');
      },
      async getInfoSite() {

        let data = await api.getInfoSite()
        if (data.status === 0) {
          this.onlineService = data.data.onlineService
        } else {
          this.$store.commit('elAlertShow', { 'elAlertShow': true, 'elAlertText': data.msg });
        }
      },
      async getStock() {
        let opt = {
            pageNum:1,
            pageSize: 4,
            stockPlate:'',
            keyWords: '',
            stockType: 'us'
        };
        let data = await api.getStock(opt);
        if (data.status === 0 && data.data.list && data.data.list.length > 0) {
            this.uslist = data.data.list;
            this.timer1 = setInterval(()=>{
              this.uslist.forEach((item,index)=>{
                item.hcrate = this.randomNum(item.hcrate)
                item.nowPrice = this.randomNum(item.nowPrice)
                item.preclose_px = this.randomNum(item.preclose_px)
              })
            },1500)
        }
      },
      async getStock2() {
        let opt = {
            pageNum:1,
            pageSize: 4,
            stockPlate:'',
            keyWords: '',
            stockType: 'hk'
        };
        let data = await api.getStock(opt);
        if (data.status === 0 && data.data.list && data.data.list.length > 0) {
            this.hklist = data.data.list;
            this.timer2 = setInterval(()=>{
              this.hklist.forEach((item,index)=>{
                item.hcrate = this.randomNum(item.hcrate)
                item.nowPrice = this.randomNum(item.nowPrice)
                item.preclose_px = this.randomNum(item.preclose_px)
              })
            },1500)
        }
      },
      async getStock3() {
        let opt = {
            pageNum:1,
            pageSize: 4,
            stockPlate:'',
            keyWords: '',
            stockType: 'tg'
        };
        let data = await api.getStock(opt);
        if (data.status === 0 && data.data.list && data.data.list.length > 0) {
            this.tglist = data.data.list;
            this.tglist.forEach(item=>{
                item.hcrate = this.generateRandomNumber()
            })
            this.timer3 = setInterval(()=>{
              this.tglist.forEach((item,index)=>{
                item.hcrate = this.randomNum(item.hcrate)
              })
            },1500)
        }
      },

      onChange(index) {
        this.currentIndex = index;

      },
      handleSearchClick() {
        //this.loading = !this.loading;
        this.$router.push({ path: "/trading-list", query: { type: 1 } });
      }
    },
    filters: {
      gettime(time) {
        if (!time) {
          return "";
        }
        var nd = new Date(time);
        var y = nd.getFullYear();
        var mm = nd.getMonth() + 1;
        var d = nd.getDate();
        var h = nd.getHours();
        var m = nd.getMinutes();
        var c = nd.getSeconds();
        if (mm < 10) {
          mm = "0" + mm;
        }
        if (d < 10) {
          d = "0" + d;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (c < 10) {
          c = "0" + c;
        }
        //17:35:2922-06-2022
        return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
      }
    },
    mounted() {
      this.getUserInfo();
      this.getInfoSite();
      this.getStock();
      this.getStock2();
      this.getStock3();

      setTimeout(() => {
        this.loading = false
      }, 2000)

    }
  };
  </script>
  <style lang="less" scoped>
  .text1{
    font-size: 20px;
    color: #333;
    width: 100px;
  }
  .text2{
    font-size: 20px;
    color: #f03a55;
  }
  .text4{
    font-size: 20px;
    font-weight: bold;
    color: #00a870;
  }
  .text3{
    font-size: 18px;
    color: #777;
    margin-left: 10px;
  }
  .cu-tag1{
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }
  .cu-tag-red{
    background: #e84a5b;
  }
  .cu-tag-blue{
    background: #4462e5;
  }
  .cu-tag-green{
    background-color: #00a870;
  }
/deep/.van-swipe__indicators {
        bottom: 0.1rem;
      }

      /deep/.van-swipe__indicator {
        background-color: #2d8cf0 !important;
        opacity: 1;
      }

      /deep/.van-swipe__indicator--active {
        width: 0.35rem !important;
        border-radius: 0.23rem;
        background-color: #aec7ec !important;
      }
.cu-bxo1{
    padding: 15px;
}
.cu-title{
    font-size: .4rem;
    font-weight: 500;
    color: #0f1112;
    line-height: .54rem;
    font-weight: bold;
}
.cu-list1{
    margin-bottom: 100px;
    .cu-item2{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        margin: 15px 0;
        .cu-card1{
            border-radius: 10px;
            border: 1px solid #ddd;
            height: 100px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .cu-card1-top{
                display: flex;
                justify-content: space-between;
                padding: 10px 20px;
            }
            .cu-card1-bottom{
                display: flex;
                padding: 10px 20px;
                align-items: center;
            }
        }
    }

}
.flex-c{
    display: flex;
}
.ml10{
    margin-left: 10px;
}
.cu-pink-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 160px;
    .cu-item1{
        width: 30%;
        height: 120px;
        padding-top: 10px;
        border-radius: 10px;
        background:  linear-gradient(180deg, rgba(240, 58, 85, .15) 0%, rgba(240, 58, 85, .1) 50%, rgba(240, 58, 85, .03) 100%);;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .t1{
            font-size: 16px;
            color: #333;
            height: 20px;
            line-height: 20px;
            width: 100px;
        }
        .t2{
            height: 20px;
            font-size: .45333rem;
            color: rgb(240, 58, 85);
            font-weight: 500;
            line-height: 20px;
        }
        .t3{
            color: #f03a55;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
        }
    }
    .cu-up{
      background:  linear-gradient(180deg, rgba(0, 168, 112, .15) 0%, rgba(0, 168, 112, .1) 50%, rgba(0, 168, 112, .03) 100%);
      .t2,.t3{
        color: #00a870;
      }
    }
}

  /deep/ .mint-msgbox-message{
    line-height: 1 !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
  }
  .mb100{
    margin-bottom: 200px;
  }
  .wrapper {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    padding-top: .3128rem;

    .page_content {
      width: 100%;
      height: 100%;
    }
  }

  .top_logo {
    width: 100%;
    height: 0.7949rem;
    display: flex;
    padding-right: 0.3rem;
    >div {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .img_logo {
      width: 3.3077rem;
      height: 0.6154rem;
      margin-left: 0.3846rem;

      >img {
        width: 100%;
        height: 100%;
      }
    }

    .right_search {
      justify-content: flex-end;
      width: 50%;
      >div {
        width: 34%;
        height: 0.4615rem;
        display: flex;
        justify-content: space-between;


        >div {
          width: 0.5615rem;
          height: 0.5615rem;

          >img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .center_tabs {
    width: 100%;
    height: auto;
    margin-top: 0.2308rem;

    >.banner_top {
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }

      .van-swipe-item {
        height: 3.0615rem;
        padding: 0 0.264rem;
        border-radius: 0.3rem;
      }

      .van-swipe-item img {
        border-radius: 0.3rem;
      }
    }

    >.announcement {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.2rem 0 0.2rem 0;

      >.an_content {
        width: 95%;
        height: 0.559rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .an_left_icon {
          width: 4%;
          height: 70%;
          display: flex;
          align-items: center;

          >img {
            width: 100%;
            height: 100%;
          }
        }

        .an_right_message {
          width: 93%;
          height: 100%;
          line-height: 0.559rem;
          align-items: center;
          align-content: center;
          font-size: 0.29rem;
          white-space: nowrap;
          overflow: hidden;
          // text-overflow:ellipsis;
        }
      }
    }

    .navs {
      width: 100%;
      height: 2.6154rem;

      display: flex;
      justify-content: center;


      >.navs_content {
        position: relative;
        overflow: hidden;
        width: 95%;
        height: 100%;
        border-radius: 0.2564rem;
        display: flex;

        >.chacha {
          width: 1rem;
          height: 1rem;
          border-radius: 100%;
          background-color: rgb(210, 210, 212);
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          right: -0.4rem;
          top: -0.4rem;

          >div {
            width: 0.3554rem;
            height: 0.3554rem;
            margin-top: 0.3rem;
            margin-left: 0.15rem;

            >img {
              width: 100%;
              height: 100%;
            }
          }

        }

        >div {
          width: 25%;
          height: 100%;
          display: flex;
          align-items: center;

          >div {
            width: 100%;
            height: 60%;

            >.top_img {
              width: 100%;
              height: 70%;
              display: flex;
              align-items: center;
              justify-content: center;

              >div {
                width: 0.9718rem;
                height: 0.9718rem;

                >img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            >.bottom_navs {
              width: 100%;
              height: 30%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.33rem;
              margin-top: 0.15rem;
            }
          }
        }
      }
    }

    .focus_on {
      width: 100%;
      height: 6.4231rem;
      margin-top: 0.2564rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .fo_content {
        width: 95%;
        height: 100%;
        padding: 0 0.2564rem;
        border-radius: 0.2564rem;
        padding-top: 0.2rem;

        .top_title {
          width: 100%;
          height: 0.8821rem;
          display: flex;
          font-size: 0.4rem;
          font-weight: 800;
          align-items: center;
        }
      }



      .fo_banner {
        width: 100%;
        height: calc(100% - .8821rem - 0.3rem);
      }
    }

    .item_cont {
      width: 100%;
      height: 1.5385rem;
      border-bottom: 0.5px solid #ececec;
      position: relative;
      border: none;
      display: flex;
      flex-wrap: wrap;
      align-content: center;

      >div {
        width: 100%;
        height: 30%;
      }

      .top_fo,
      .bottom_fo {
        display: flex;
        justify-content: space-between;

        span {
          display: inline-block;
        }

        .title {
          width: 30%;
          height: 100%;
          display: flex;
          align-items: center;
          font-weight: 500;

        }

        .aikesi {
          width: auto;
          height: 0.3rem;
          background: #dbe3f0;
          color: #546daf;
          padding-left: 0.2rem;
          padding-right: 0.2rem;
          font-size: 0.15rem;
          line-height: 0.3rem;
          margin-right: 0.1rem;
        }

        .numberid {
          font-size: 0.28rem;
          display: flex;

          line-height: 0.5rem;
        }

        .numbers {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;

        }

        .point {
          font-size: 0.28rem;
          height: 0.5rem;
          line-height: 0.5rem;
        }

        .percentage {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          text-align: center;
          justify-content: center;
        }

        .percentage span {
          height: 0.5rem;
          line-height: 0.5rem;
        }
      }

      .top_fo {
        font-size: 0.3846rem !important;
      }

      .bottom_fo {
        margin-top: 0.1rem;
        font-size: 0.1846rem;
        color: #999898;
      }

      .percentage.gree {
        color: green !important;
      }

      .percentage.redd {
        color: red !important;
      }
    }
  }

  .item_conts::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: #ececec;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .my-swipe .van-swipe-item {

    font-size: 0.5128rem;
    line-height: 3.8462rem;
    text-align: center;
    overflow: hidden;
  }

  .fo_my-swipe .van-swipe-item {

    font-size: 0.5128rem;
    line-height: 3.8462rem;
    overflow: hidden;
  }

  .fo_my-swipe {
    width: 100%;
    height: 100%;
  }

  .focus_skeleton {
    margin-top: 1rem;
  }

  .van-skeleton__row,
  .van-skeleton__title {
    height: .7rem;
  }

  .news-tab {
    width: 95%;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 0.2rem;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 0.3rem;





    /deep/.is-selected .tab-name {
      position: relative;
    }

    /deep/.mint-navbar .mint-tab-item.is-selected {
      border: 0 !important;
      border-bottom: none;
    }

    /deep/.is-selected .tab-name:after {
      position: absolute;
      display: block;
      content: '';
      height: .07rem;
      background-color: #1381A4;
      width: 100%;
      left: 0;
      bottom: -.25rem;
    }
  }

  .news-content {
    position: relative;
    padding: 0.3rem;
  }

  .item-out {
    position: relative;
    border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
    padding: 0 0.25rem 1rem 0.25rem;
  }

  .item-out::before {
    content: "●";
    position: absolute;
    top: -0.1rem;
    left: -0.128rem;
    margin: auto;
  }

  .item-times {
    color: #999;
    margin-bottom: 0.15rem;
  }

  .titContent {
    position: relative;
    width: 100%;
    font-size: .35rem;
    line-height: .46rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
  }

  .neitu {
    width: 100%;
    border-radius: 0.05rem;
    margin-top: 0.3rem;
    margin-bottom: 0.8rem;
  }

  .neitu img {
    width: 100%;
    border-radius: 0.05rem;
  }

  .block-out {
    margin-top: 0.2rem;
  }

  .blocks {
    width: auto;
    font-size: 0.32rem;
    padding: 0.08rem 0.15rem 0.08rem 0.15rem;
    display: inline-block;
    border: 0.0513rem solid #41AC75;
    color: #41AC75;
  }

  .animate {

    padding-left: 20px;

    font-size: 0.29rem;

    color: #000;

    display: inline-block;

    white-space: nowrap;

    animation: 10s wordsLoop linear infinite normal;

  }



  @keyframes wordsLoop {

    0% {

      transform: translateX(100%);

      -webkit-transform: translateX(100%);

    }

    100% {

      transform: translateX(-100%);

      -webkit-transform: translateX(-100%);

    }

  }



  @-webkit-keyframes wordsLoop {

    0% {

      transform: translateX(100%);

      -webkit-transform: translateX(100%);

    }

    100% {

      transform: translateX(-100%);

      -webkit-transform: translateX(-100%);

    }

  }

  </style>
